<template>
	<view :style="theme">
		<view class="content" :style="{background: 'linear-gradient(180deg,' + 'var(--color2)' + ' 0%, #fff 100%)'}">
			<image :src="logo" mode="widthFix" class="logo"></image>
			<view class="logoName">
				{{appName}}
			</view>
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
					<u--form labelPosition="left" :model="model1">
						<view class="formitem">
							<u-form-item>
								<u--input v-model="model1.phone" clearable border="none" placeholder="手机号"
									maxlength="11" prefixIcon="phone" fontSize="30rpx"
									prefixIconStyle="font-size: 40rpx;color: #B7BBC5">
								</u--input>
							</u-form-item>
						</view>
						<view class="formitem mt40">
							<u-form-item prop="yzm">
								<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
								<!-- #ifndef APP-NVUE -->
								<u-input v-model="model1.yzm" type="number" border="none" placeholder="验证码" clearable
									maxlength="6" prefixIcon="lock" fontSize="30rpx"
									prefixIconStyle="font-size: 40rpx;color: #B7BBC5">
								<!-- #endif -->
									<!-- #ifdef APP-NVUE -->
									<u--input v-model="model1.yzm" type="number" border="none" placeholder="请输入验证码"
										clearable maxlength="6" prefixIcon="lock" fontSize="30rpx"
										prefixIconStyle="font-size: 40rpx;color: #B7BBC5">
									<!-- #endif -->
										<template slot="suffix">
											<u-code ref="uCode" type="text" @change="codeChange" seconds="60"
												changeText="X秒重新获取"></u-code>
											<u-button @tap="getCode" :text="tips" type="text" size="normal"
												customStyle="color: var(--color);font-size: 30rpx"></u-button>
										</template>
								<!-- #ifndef APP-NVUE -->
								</u-input>
								<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								</u--input>
								<!-- #endif -->
							</u-form-item>
						</view>
					</u--form>
					<view class="foot">
						<view class="foot_btn" @click="$noMultipleClicks(submit)">立即登录</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				model1: {},
				logo: '',
				appName: '',
				id: '',
				tips: '',
			}
		},
		onShow() {
			uni.removeStorageSync('token')
			setTimeout(()=> {
				this.getLogin()
			}, 200)
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getLogin() {
				let that = this
				this.logo = uni.getStorageSync('logo');
				this.appName = uni.getStorageSync('appName');
				let code = uni.getStorageSync('code')
				let link = window.location.href;
				if (link.indexOf('code=') == -1) {
					let appid = this.$store.state.gzhId;
					let uri = encodeURIComponent(link);
					let authURL =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
					window.location.href = authURL;
				} else {
					let temp = link.split("code=")[1];
					code = temp.split("&")[0];
					if (uni.getStorageSync('code') == code) {
						return false
					}
					uni.setStorageSync('code', code);
					that.$app.ajax({
						data: {
							param: {
								code: code
							}
						},
						api: that.$api.wxpLogin()
					}).then((res) => {
						if (res.errorCode == '40100818') {
							setTimeout(() => {
								link = location.href.split('?')[0];
								let appid = that.$store.state.gzhId;
								let uri = encodeURIComponent(link);
								let authURL =
									`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
								window.location.href = authURL;
							}, 1000)
						}
						that.$store.commit('setOpenId', res.record.openId)
						if (res.record.token) {
							that.$store.commit('login', res.record.token)
							setTimeout(() => {
								// console.log(res.record.token,2321, uni.getStorageSync('token'))
								that.getMemberInformation()
							}, 300)
						}
					}).catch(() => {})
				}
			},
			getCode() {
				if (!this.model1.phone) {
					this.$app.showToast('请输入新手机号')
					return false
				}
				if (this.model1.phone && this.model1.phone.length != 11) {
					this.$app.showToast('请输入11位手机号')
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$app.ajax({
						data: {
							param: {
								phone: this.model1.phone,
								type: '01',
								openId: uni.getStorageSync('openId')
							}
						},
						api: this.$api.verificationCodeb()
					}).then((res) => {
						uni.hideLoading();
						if (res.errorCode == '000000') {
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}
					}).catch(() => {
						uni.hideLoading();
						console.log('err', err)
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				if (!this.model1.phone) {
					this.$app.showToast('请输入手机号')
					return false
				}
				if (!this.model1.yzm) {
					this.$app.showToast('请输入验证码')
					return false
				}
				this.$app.ajax({
					data: {
						param: {
							openId: uni.getStorageSync('openId'),
							phone: this.model1.phone,
							wxpCode: this.model1.yzm
						}
					},
					api: this.$api.wxpBind()
				}).then((res) => {
					if (res.errorCode == '000000') {
						if (res.record.token) {
							this.$store.commit('login', res.record.token)
							this.$app.showToast('登录成功')
							setTimeout(() => {
								// console.log(res.record.token,2321, uni.getStorageSync('token'))
								this.getMemberInformation()
							}, 300)
						}

					}
				}).catch(() => {})
			},
			getMemberInformation() {
				this.$app.ajax({
					data: {
						param: {}
					},
					api: this.$api.memberInformation()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.$store.commit('saveUserInfo', res.record);
						this.$store.commit('setVenue', true);
						uni.removeStorage('code')
						const pages = getCurrentPages()
						if (pages.length === 1) {
							history.back()
						} else {
							uni.reLaunch({
								url: '/pages/index/index',
							})
						}

					}
				}).catch(() => {})
			},
		},
	}
</script>
<style lang="scss">
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 0 50rpx 60rpx;
		box-sizing: border-box;
		overflow-y: hidden;
		display: flex;
		height: 80vh;
		flex-direction: column;
		justify-content: center;

		.u-form-item {
			width: 100%;
		}
	}

	.logo {
		width: 180rpx;
		margin: 0 auto;
		margin-bottom: 40rpx;
	}

	.logoName {
		font-size: 44rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 60rpx;
		text-align: center;
		margin-bottom: 80rpx;
	}

	.formitem {
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.foot {
		width: 100%;
		margin-top: 80rpx;

		.foot_btn {
			line-height: 98rpx;
			background: $color;
			box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(0, 186, 146, 0.2);
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}

	}
</style>